<template name="skeleton">
  <view class="sk">
    <view class="fill">
      <view class="row" style="width: 710rpx; height: 710rpx;"></view>
      <view class="items">
        <view class="item" style="width: 100rpx; height: 50rpx;"></view>
        <view class="item" style="width: 200rpx; height: 50rpx;"></view>
        <view class="item" style="width: 80rpx; height: 50rpx;"></view>
      </view>
      <view class="row" style="width: 600rpx; height: 50rpx;"></view>
      <view class="row" style="width: 700rpx; height: 50rpx;"></view>
      <view class="row" style="width: 710rpx; height: 50rpx;"></view>
      <view class="row" style="width: 710rpx; height: 100rpx;"></view>
      <view class="row" style="width: 710rpx; height: 500rpx;"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: "SkeletonProductShowCom"
}
</script>

<style lang="scss" scoped>
	.sk {
	  width: 100%;
	  height: 100%;
	  background-color: white !important;
	  position: absolute;
	  top: 0;
	  left: 0;
	  z-index: 999999999;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-x: hidden;
	  // padding: 20rpx;
	  .fill{
	    .row {
	      background-color: #EEEEEE;
	      border-radius: 10rpx;
	      margin-bottom: 15rpx;
	    }
	    .items {
	      display: flex;
	      justify-content: flex-start;
	      align-items: center;
	      .item {
	        background-color: #EEEEEE;
	        border-radius: 5rpx;
	        margin-right: 15rpx;
	        margin-bottom: 15rpx;
	      }
	    }
	  }
	}
</style>
